<script setup>
import logo from "@/assets/imgs/siteLogo.png";
import NavMenu from "./NavMenu.vue";
import { useRouter } from "vue-router";

const title = "统一平台";

const router = useRouter();
function goHome() {
  router.push("/home");
}
</script>

<template>
  <div class="nav-container p-base-h">
    <a-space class="left-box" @click="goHome">
      <img :src="logo" alt="logo" class="logo" />
      <span class="site-title">{{ title }}</span>
    </a-space>
    <div class="middle-box">
      <NavMenu />
    </div>
    <a-space class="right-box">
      <a-avatar style="background-color: #b669febf">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <div class="name-box">id</div>
    </a-space>
  </div>
</template>

<style lang="less" scoped>
.nav-container {
  .flex-between();
  border-bottom: 1px solid #ddd;
  .left-box {
    cursor: pointer;
    .logo {
      height: 50px;
    }
    .site-title {
      user-select: none;
      vertical-align: middle;
      font-size: 24px;
      font-weight: 700;
      /* 渐变 */
      background: linear-gradient(20deg, #6739cb, #c59bed);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* 阴影 */
      text-shadow: 2px 2px 3px rgba(106, 27, 154, 0.3),
        3px 4px 5px rgba(106, 27, 154, 0.25),
        5px 7px 9px rgba(106, 27, 154, 0.2);
      /* 边缘锐化 */
      -webkit-text-stroke: 0.5px rgba(106, 27, 154, 0.3);
    }
  }
  .middle-box {
    flex: 1;
    height: 100%;
    padding-left: 32px;
    padding-right: 12px;
  }
  .right-box {
    display: flex;
    .name-box {
      font-weight: 700;
    }
  }
}
</style>
